<template>
  <view class="content">
    <view class="section-0">
      <view class="section-body">
        <view class="list-container">
          <view class="header">
            <view class="item1">序号</view>
            <view class="item2">区域</view>
            <view class="item3">样板名称</view>
            <view class="item4"></view>
          </view>
          <view class="body">
            <view
              class="row"
              v-for="(item, index) in list"
              :key="item.name"
              @click="goto(item)"
            >
              <view class="item1">{{ index + 1 }}</view>
              <view class="item2">{{ item.area }}</view>
              <view class="item3" v-if="item.not_count != 0"
                >{{ item.template_name }}({{
                  item.all_count - item.not_count
                }}/{{ item.all_count }})</view
              >
              <view class="item3" v-if="item.not_count == 0"
                >{{ item.template_name }}({{ item.all_count }}/{{
                  item.all_count
                }})
              </view>
              <view class="item4">
                <image
                  src="../../../../static/weixian.png"
                  v-if="item.not_count != 0"
                  mode="aspectFit"
                  style="width: 12px; height: 12px"
                ></image>
                <image
                  src="../../../../static/anquan.png"
                  v-if="item.not_count == 0"
                  mode="aspectFit"
                  style="width: 12px; height: 12px"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getProjectTemplateApi } from "@/api/statistics.js";
export default {
  data() {
    return {
      id: "",
      name: "",
      list: [],
    };
  },
  methods: {
    async fetchInfo() {
      uni.showLoading({ title: "加载中..." });
      const { data } = await getProjectTemplateApi({ project_id: this.id });
      if (data.code === 1) {
        this.list = data.data;
      }
      uni.hideLoading();
    },
    goto(item) {
        uni.navigateTo({
          url: "/pages/statistics/today/risk/TJdemolistdetail?id=" + item.id,
        });
    },
  },

  onLoad(e) {
    this.id = e.id;
  },
  onReady() {
    this.fetchInfo();
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #fafbfd;
}
.section-0 {
  width: 100%;
  background-color: #3a5df5;
  .section-body {
    width: 100%;
    padding-left: 40rpx;
    padding-right: 40rpx;
    padding-bottom: 50rpx;
    padding-top: 50rpx;
    background-color: #fafbfd;
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    overflow: hidden;
    box-sizing: border-box;
    .list-container {
      width: 100%;
      background: #fff;
      border-radius: 35rpx;
      box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
      margin-bottom: 65rpx;
      padding-top: 40rpx;
      padding-bottom: 40rpx;
      @include clear();
      position: relative;
      .body {
        margin: 0 auto;
        width: 636rpx;
        .row {
          width: 100%;
          height: 117rpx;
          // line-height: 124rpx;
          display: flex;
          justify-content: space-between;
          border-bottom: solid 2rpx #e2e7f5;
          &:last-child {
            border-bottom: none;
          }
          .item1 {
            margin-top: 14rpx;
            width: 15%;
            text-align: center;
            // height: 60rpx;
            // line-height: 60rpx;
            font-size: 26rpx;
            flex-wrap: wrap;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: #3b3c40;
          }
          .item2 {
            margin-top: 14rpx;
            width: 30%;
            text-align: center;
            // height: 60rpx;
            // line-height: 60rpx;
            font-size: 26rpx;
            flex-wrap: wrap;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: #3b3c40;
          }
                    .item3 {
            margin-top: 14rpx;
            width: 50%;
            text-align: center;
            // height: 60rpx;
            // line-height: 60rpx;
            font-size: 26rpx;
            flex-wrap: wrap;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: #3b3c40;
          }
                    .item4 {
            margin-top: 14rpx;
            width: 5%;
            text-align: center;
            // height: 60rpx;
            // line-height: 60rpx;
            font-size: 26rpx;
            flex-wrap: wrap;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: #3b3c40;
          }
        }
      }
      .header {
        margin: 0 auto;
        width: 636rpx;
        height: 48rpx;
        background-color: #95c4fa;
        border-radius: 20rpx;
        display: flex;
        justify-content: space-between;
        .item1 {
          width: 15%;
          text-align: center;
          height: 48rpx;
          line-height: 48rpx;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #3b3c40;
        }
          .item2{
          width: 30%;
          text-align: center;
          height: 48rpx;
          line-height: 48rpx;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #3b3c40;
        }
          .item3 {
          width: 50%;
          text-align: center;
          height: 48rpx;
          line-height: 48rpx;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #3b3c40;
        }
          .item4 {
          width: 5%;
          text-align: center;
          height: 48rpx;
          line-height: 48rpx;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #3b3c40;
        }
      }
    }
  }
}
</style>
